<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="角色管理"></dy-panel-header>
          <el-row>
            <el-col :span="24">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">

                    <el-form-item label="状态">
                      <el-select v-model="queryParam.disabled" placeholder="请选择状态">
                        <el-option label="全部" value></el-option>
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="关键字">
                      <el-input
                        v-model="queryParam.searchKey"
                        placeholder="请输入角色编码或角色名称"
                        @change="doSearchList"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="doSearchList">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
                <el-row>
                  <el-button type="primary" :disabled="!operateBtn.addBtn" @click="onAddBtnEvent">新增</el-button>
                  <el-button
                    type="success"
                    :disabled="!operateBtn.editBtn"
                    @click="onEditBtnEvent"
                  >修改
                  </el-button>
                  <el-button type="danger" @click="onDelBtnEvent" :disabled="!operateBtn.delBtn">删除</el-button>
                  <!--<el-button type="default" :disabled="!operateBtn.importBtn">导入</el-button>-->
                  <!--<el-button type="default" :disabled="!operateBtn.exportBtn">导出</el-button>-->
                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  @selection-change="onSelectRowEvent"
                  :data="tableList"
                  border
                  style="width: 100%;text-align: center"
                  @sort-change="onSortTableEvent"
                >
                  <el-table-column
                    type="selection"
                    prop="date"
                    label="序号"
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column prop="roleName" label="角色名称" align="center" width="180"></el-table-column>
                  <el-table-column prop="roleCode" label="编码" align="center" width="180"></el-table-column>
                  <el-table-column
                    prop="isDefault"
                    label="默认"
                    align="center"
                    width="80"
                    sortable="custom"
                  >
                    <template slot-scope="scope">
                      <sapn>{{scope.row.isDefault==1?'是':'否'}}</sapn>
                    </template>
                  </el-table-column>
                  <el-table-column prop="priorityLevel" label="优先级" align="center"></el-table-column>
                  <el-table-column prop="disabled" label="状态" align="center">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.disabled==1?'danger':''"
                        effect="dark"
                      >{{scope.row.disabled==1?'禁用':'正常'}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                  <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
                  <el-table-column prop="id" label="操作" width="160">
                    <template slot-scope="scope">
                      <el-link
                        style="margin-right: 10px"
                        @click="onEditRowEvent(false,scope.row)"
                        type="primary"
                      >编辑
                      </el-link>
                      <!--<el-link style="margin-right: 10px" type="primary">关联接口</el-link>-->
                      <el-link style="margin-right: 10px" @click="onMenuBtnEvent(scope.row)" type="primary">关联菜单
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <dy-pagination
                    :current-page.sync="queryParam.currentPage"
                    :page-size.sync="queryParam.pageSize"
                    @click="doSearchList"
                    :total="tableTotal"
                  ></dy-pagination>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
      <dy-modal
        :read-only="editModal.readOnly"
        v-if="editModal.visible"
        :visible.sync="editModal.visible"
        :form-key="editModal.formKey"
        v-on:close="onRefresh"
        width="400px"
      >
        <auth-role-update
          :data="editModal.data"
          :form-key="editModal.formKey"
          :roleList="roleList"
          :deptList="deptList"
        ></auth-role-update>
      </dy-modal>
      <el-dialog
        title="关联菜单"
        :visible.sync="menuModal.visible"
        v-if="menuModal.visible"
        v-on:close="onRefresh"
        width="20%">
        <el-input
          placeholder="请输入资源名称过滤"
          v-model="menuFilterText">
        </el-input>
        <el-tree
          :data="menuTreeList"
          show-checkbox
          node-key="id"
          ref="tree"
          :filter-node-method="onDeptFilterNodeEvent"
          :default-checked-keys="menuSelectIdList"
          :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
        <el-button @click="menuModal.visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitMenu()" :loading="menuModal.logging">确 定</el-button>
      </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import authTbResourceApi from '@/apis/authApp/authTbResourceApi.js'
  import authTbRoleApi from '@/apis/authApp/authTbRoleApi.js'
  import UserUpdate from '@/pages/AuthApp/AuthRole/AuthRoleUpdate.vue'
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import AuthRoleUpdate from './AuthRoleUpdate'
  import authFkRoleResourceApi from '@/apis/authApp/authFkRoleResourceApi.js'

  export default {
    name: 'userList',
    components: {
      AuthRoleUpdate,
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      UserUpdate,
      DyPagination
    },
    data () {
      return {
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'user-update',
          readOnly: false,
          data: {},
          visible: false
        },
        menuModal: {
          data: {},
          visible: false
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: true,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        deptFilter: '',
        roleList: [],
        deptList: [],
        tableTotal: 0,
        tableList: [],
        menuFilterText: '',
        menuTreeList: [],
        menuSelectIdList: [],
        defaultProps: {
          children: 'children',
          label: 'resourceName'
        }
      }
    },
    created () {

      /**
       * 获取可用角色
       */
      authTbRoleApi.selectListByEnabled().then(msg => {
        this.roleList = msg.rows
      })
      /**
       * 执行列表查询
       * */
      this.doSearchList()
      this.doSelectAllMenu()
    },

    methods: {

      onDeptFilterNodeEvent (value, data) {
        if (!value) return true
        return data.resourceName.indexOf(value) !== -1
      },
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = {}
        this.editModal.visible = true
      },
      onDelBtnEvent () {
        this.$confirm('您确认要删除选中的记录么？', '删除警告', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          let ids = []
          for (let row of this.selectRows) {
            ids.push(row.id)
          }
          this.doDeleteList(ids)
        })
      },
      onMenuBtnEvent (row) {
        this.menuSelectIdList = row.menuIdList
        this.menuModal.roleCode = row.roleCode
        this.menuModal.visible = true
      },
      onSubmitMenu () {
        let data = {
          resourceIdList: this.$refs.tree.getCheckedKeys(),
          roleCode: this.menuModal.roleCode
        }
        this.menuModal.logging = true
        authFkRoleResourceApi.updateRoleRelationResource(data).then((msg) => {
          this.menuModal.logging = false
          this.$message({
            message: msg.msg,
            type: 'success'
          })
          this.menuModal.visible = false
          this.onRefresh(true)
        }).catch((action) => {
          this.menuModal.logging = false
        })
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
      },
      onRefresh (isRefresh) {
        if (isRefresh) {
          this.doSearchList()
        }
      },
      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      /**
       * 查询列表业务处理
       */
      doSelectAllMenu () {
        let menuQueryParam = {}
        menuQueryParam.resourceType = 'menu'
        menuQueryParam.pageSize = 10000
        authTbResourceApi.selectTreeList(menuQueryParam).then(msg => {
          setTimeout(() => {
            this.menuTreeList = msg.rows
            this.tableTotal = msg.total
          }, 200)
        })
      },
      doDeleteList (ids) {
        let data = {ids: ids}
        authTbRoleApi.deleteListService(data).then(msg => {
          this.onRefresh(true)
        })
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        authTbRoleApi.selectList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
          }, 200)
        }).finally(() => {
          this.loading = false
        })
      }
    },
    computed: {},
    watch: {
      menuFilterText (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
